import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { AtProgress } from 'taro-ui'

import stick from '@assets/images/stick.png'
import disk from '@assets/images/disk.png'
import listCycle from '@assets/images/list-cycle.png'
import randomCycle from '@assets/images/random-cycle.png'
import singleCycle from '@assets/images/single-cycle.png'
// 操作
import menu from '@assets/images/menu.png'
import previousSong from '@assets/images/previous-song.png'
import nowPlaying from '@assets/images/now-playing.png'
import pause from '@assets/images/pause.png'
import nextSong from '@assets/images/next-song.png'

import like from '@assets/images/like.png'
import likeActive from '@assets/images/like-active.png'
import download from '@assets/images/download1.png'
import comment from '@assets/images/comment1.png'
import more from '@assets/images/more1.png'

import songApi from '@api/song'

import './index.scss'

const innerAudioContext = Taro.createInnerAudioContext()

class NowPlaying extends Component {
  constructor(props) {
    super(props)
    this.state = {
      paramsId: null,
      playing: true,
      cycleList: [randomCycle, listCycle, singleCycle], // 循环类型
      toggleCycle: 0, // 循环状态
      songInfo: {}, // 歌曲信息
      isLike: false, // 收藏与否
      showLyric: false,
      isLevel: '',
      lyrics: null // 歌词
    }
  }

  config = {
    enablePullDownRefresh: false,
    disableScroll: true
  }

  componentWillMount() {
    const id = this.$router.params.id
    this.setState({
      paramsId: this.$router.params.id
    })
    songApi.songDetail({ ids: id }).then(res => {
      const obj = {
        picUrl: res.songs[0].al.picUrl,
        title: res.songs[0].name
      }
      this.setState({
        songInfo: obj
      })
      Taro.setNavigationBarTitle({
        title: `${obj.title}`
      })
    })
    songApi.songUrl({ id: id }).then(res => {
      innerAudioContext.autoplay = true
      innerAudioContext.src = res.data[0].url
      this.setState({
        isLevel: res.data[0].level
      })
    })
  }

  componentDidMount() { }

  // 处理循环
  handleCycle(value) {
    if (value < 2) {
      this.setState({
        toggleCycle: ++value
      })
    } else {
      this.setState({
        toggleCycle: 0
      })
    }
  }

  // 是否暂停
  handlePlay() {
    this.setState({
      playing: !this.state.playing
    })
    // 此处暂停播放有坑
    if (this.state.playing) {
      innerAudioContext.pause()
      innerAudioContext.offPause()
      innerAudioContext.onPause(() => {
        console.log('暂停', innerAudioContext.paused)
      })
    } else {
      innerAudioContext.play()
      innerAudioContext.onPlay(() => {
        console.log('开始播放', innerAudioContext.paused)
      })
    }
  }

  // 收藏
  handleLike() {
    this.setState({
      isLike: !this.state.isLike
    })
  }

  // 获取歌词
  handleLyric() {
    if (!this.state.lyrics) {
      songApi.lyric({ id: this.state.paramsId }).then(res => {
        // 去掉中括号及其内容 .replace(/\[.*?\]/g,'')
        this.setState({
          lyrics: res.lrc.lyric.replace(/\[.*?\]/g, ''),
          showLyric: true
        })
      })
    } else {
      this.setState({
        showLyric: !this.state.showLyric
      })
    }
  }

  render() {
    const scrollTop = 50
    return (
      <View className='now-playing'>
        <View class='bg'
          style={{ background: `${this.state.isLevel ? `url(${this.state.songInfo.picUrl ? this.state.songInfo.picUrl : null})` : 'rgba(0, 0, 0, 0.2)'}` }}
        >
        </View>
        <View style={{ display: this.state.showLyric ? 'none' : 'block' }}>
          <View className='stick'>
            <View className={['stick-center', this.state.playing ? 'stick-active' : null].join(' ')}>
              <Image src={stick} className='icon' />
            </View>
          </View>
          <View className='disk' onClick={this.handleLyric.bind(this)}>
            <Image src={disk} className='disk-icon' />
            <View className='album-icon'>
              <Image
                src={this.state.songInfo.picUrl}
                className={['album', this.state.playing ? 'album-active' : null].join(' ')}
              />
            </View>
          </View>
        </View>
        {/* 歌词 */}
        <View className='lyrics' style={{ display: this.state.showLyric ? 'block' : 'none' }} onClick={this.handleLyric.bind(this)}>
          <ScrollView
            className='scroll-view'
            scrollY
            scrollWithAnimation
            scrollTop={scrollTop}
          >
            <Text className='text'>{this.state.lyrics}</Text>
          </ScrollView>
        </View>
        <View class='play-operate'>
          <View className='flex-1'>
            <Image
              src={this.state.isLike ? likeActive : like}
              className='flex-icon'
              onClick={this.handleLike.bind(this)}
            />
          </View>
          <View className='flex-1'>
            <Image src={download} className='flex-icon' />
          </View>
          <View className='flex-1'>
            <Image src={comment} className='flex-icon' />
          </View>
          <View className='flex-1'>
            <Image src={more} className='flex-icon' />
          </View>
        </View>
        {/* 进度条 */}
        <View className='progress'>
          <View className='progress-time'>00: 01</View>
          <View className='progress-line'>
            <AtProgress percent={25} strokeWidth={2} color='#999' status='progress' isHidePercent />
          </View>
          <View className='progress-time'>04: 01</View>
        </View>
        <View class='play-operate'>
          <View className='flex-1'>
            {
              this.state.cycleList.map((item, index) => {
                return (
                  <Image
                    key={item + index}
                    src={item}
                    className='flex-icon'
                    onClick={this.handleCycle.bind(this, index)}
                    style={{ display: index === this.state.toggleCycle ? 'block' : 'none' }}
                  />
                )
              })
            }
          </View>
          <View className='flex-1'>
            <Image src={previousSong} className='flex-icon' />
          </View>
          <View className='flex-1' onClick={this.handlePlay.bind(this)}>
            <Image src={this.state.playing ? nowPlaying : pause} className='play-icon' />
          </View>
          <View className='flex-1'>
            <Image src={nextSong} className='flex-icon' />
          </View>
          <View className='flex-1'>
            <Image src={menu} className='flex-icon' />
          </View>
        </View>
      </View>
    )
  }
}

export default NowPlaying
